<script setup>
import firstTabs from './project-data-components/first-tabs.vue';
import secondTabs from './project-data-components/second-tabs.vue';
const activeName = ref('first');
</script>

<template>
  <el-container class="index-home-implementation-plan">
    <el-header class="header">
      <label class="header__label">项目资料</label>
      <div class="main__table">
        <el-tabs v-model="activeName" class="demo-tabs" >
          <el-tab-pane label="资料协同需求" name="first">
            <firstTabs></firstTabs>
          </el-tab-pane>
          <el-tab-pane label="资料协同反馈" name="second">
            <secondTabs></secondTabs>
          </el-tab-pane>
          </el-tabs>
      </div>
    </el-header>
  </el-container>
</template>

<style lang="scss" scoped>
.index-home-implementation-plan {
  margin-top: 18px;

  .header {
    .header__label {
      height: 24px;
      font-size: 16px;
      font-weight: bold;
      color: #25292c;
      line-height: 24px;
      letter-spacing: 1px;
    }

    .main__search {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 auto;
      margin-top: 17px;
      height: 64px;
      background: #ffffff;
      border-radius: 2px;

      .main__search-department {
        padding-left: 24px;
      }
      .main__search-plan {
        width: 370px;
        padding-right: 24px;
      }
    }

    .main__table {
      margin-top: 16px;
      background: #ffffff;
      border-radius: 2px;
      padding: 15px 24px;

      .table {
        margin-top: 17px;
      }
    }
  }
}
// .demo-tabs {
//   .el-tabs__nav-scroll{
//     background: white;
//   }
// }
</style>
